<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">

<body data-type="index">
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <jsp:include page="common/header.jsp"></jsp:include>
        <!-- 风格切换 -->
        
        <!-- 侧边导航栏 -->
        <jsp:include page="common/left.jsp"></jsp:include>


        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">

            <div class="row-content am-cf">
                <div class="row  am-cf">
                    
                    <div class="row">

                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">转账操作</div>
                                <div class="widget-function am-fr">
                                    <a href="javascript:;" class="am-icon-cog"></a>
                                </div>
                            </div>
                            <div class="widget-body am-fr">

                                <form class="am-form tpl-form-line-form">


                                <div class="am-form-group">
                                        <label for="user-phone" class="am-u-sm-3 am-form-label">银行卡 <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <select id="cardSelect" data-am-selected="{searchBox: 1}"
                                                    style="display: none;">
                                            </select>

                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="inCardNum" class="am-u-sm-3 am-form-label">转入卡号 <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="inCardNum" placeholder="请输入收款卡号">
                                            <small></small>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="pwd" class="am-u-sm-3 am-form-label">密码 <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <input type="password" class="tpl-form-input" id="pwd" placeholder="请输入6位银行卡密码">
                                            <small></small>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="amount" class="am-u-sm-3 am-form-label">金额 <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="amount" placeholder="请输入转账金额">
                                            <small></small>
                                        </div>
                                    </div>

                                    

                                    

                                    <div class="am-form-group">
                                        <div class="am-u-sm-9 am-u-sm-push-3">
                                            <button type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success " onclick="transfer();">转账</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

        

                    
                    
                </div>

               

 
                </div>



            </div>
        </div>
    </div>
    </div>
   <script>
       $(document).ready(function () {
           listCards();
       });
       //String outCardNum, String inCardNum, String pwd, String amount,
       function transfer() {
           $.ajax({
               type: "POST",
               dataType: "json",
               url: '/card/transfer.do',
               data: {
                   outCardNum : $('#cardSelect').val(),
                   inCardNum: $('#inCardNum').val(),
                   pwd : $('#pwd').val(),
                   amount : $('#amount').val(),
               },
               success: function (dataResult) {
                   if (1000 !== dataResult.code) {
                       alert(dataResult.message);
                       return false;
                   }

                   window.location.href = "/user/toHome.do";

               },
               error: function (XMLHttpResponse) {
               }
           });
       }
       function listCards() {
           $.ajax({
               type: "GET",
               dataType: "json",
               url: '/card/getBankCards.do',
               data: {
               },
               success: function (dataResult) {
                   if (1000 !== dataResult.code) {
                       alert(dataResult.message);
                       return false;
                   }

                   let resutls = dataResult.data;
                   let msg = '';
                   for (let i=0; i<resutls.length; i++) {
                       msg += '<option value="'+resutls[i].cardNum+'">'+resutls[i].cardNum+'</option>';
                   }

                   $('#cardSelect').html(msg);

               },
               error: function (XMLHttpResponse) {
               }
           });
       }
   </script>

</body>

</html>